<template>
  <el-form ref="form" :model="emp" :rules="formRules" label-width="80px">

    <el-form-item label="姓名" prop="name">
      <el-input v-model="emp.name" placeholder="请输入姓名" type="text"></el-input>
    </el-form-item>

    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="emp.age" type="number" placeholder="请输入年龄"></el-input>
    </el-form-item>

    <el-form-item label="日期" prop="bir">
      <div class="block">
        <el-date-picker
          v-model="emp.bir"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
    </el-form-item>

    <el-form-item label="内容" prop="content">
      <el-input v-model="emp.content" placeholder="请输入内容" type="text"></el-input>
    </el-form-item>

    <el-form-item label="地址" prop="address">
      <el-input v-model="emp.address" placeholder="请输入地址" type="text"></el-input>
    </el-form-item>

    <el-form-item align="left">
      <el-button type="primary" @click.prevent="handleAdd">添加</el-button>
      <el-button @click="backForm">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    export default {
        name: "AddEmp",
      data(){
        return{
          emp:{},
          formRules:{//表单校验规则
            name:[{required:true,message:"姓名不能为空",trigger:"blur"}],
            age:[{required:true,message:"年龄不能为空",type:'number',min:1,trigger:"blur"},
              // {min:1,max:100,message:"年龄在0~100之间",type:'number',trigger: "blur"}
            ],
            bir:[{required:true,message:"日期不能为空",trigger:"blur"},],
            content:[//username项的校验规则，每一项规则可以有多个要求
              {required:true,message:"内容不能为空",trigger:"blur"},
              // {min:0,max:100,message: "长度在0~100之间",trigger: "blur"}
            ],
            address:[//password项的校验规则
              {required:true,message:"地址不能为空",trigger:"blur"}
            ]
          },

        }

      },
      methods:{
        handleAdd(){
          //点击登录按钮时，需要再次进行校验
          //通过this.$refs[”表单的ref“]获取表单

          this.$refs["form"].validate((valid)=>{
            //valid表示表单校验的结果 true|false

            console.log(this.emp);
            console.log(valid)
            if(valid){
              this.axios.post("/emp",this.emp).then(resp=>{
                console.log(this.emp);
                if(resp.data.status=="success"){
                  this.$message.success("添加成功");
                  this.$router.push("/show")
                }else {
                  this.$message.success("添加失败");
                }
              })
            }else{
              this.$message.success("校验失败，不可以提交表单");
            }
          })
        },
        backForm(){
          this.$message({
            message: '取消添加',
            type: 'warning'
          });
          let pageNum = this.$route.query.pageNum
          this.$router.push({path:"/show",query:{pg:pageNum}})
        }

      }
    }
</script>

<style scoped>

</style>
